<div class="layui-form" lay-filter="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">实验名</label>
        <div class="layui-input-block">
            <input type="text" name="experimentName" placeholder="50字以内" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">实验描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="200字以内" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">镜像ID</label>
        <div class="layui-input-block">
            <input type="text" name="imageID" lay-verify="number" lay-verify="required|number" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">容器存活</label>
        <div class="layui-input-inline" style="width: 20%;">
            <input type="text" name="containerAliveTime" placeholder="24" lay-verify="number|required" class="layui-input">
        </div>
        <div class="layui-form-mid">
            小时
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">容器内存</label>
        <div class="layui-input-inline" id="slider-memory" style="padding: 16px 16px 16px 7px;">
        </div>
        <div class="layui-form-mid">
          MB
        </div>
    </div>
    <div class="layui-form-item" hidden>
            <input type="text" id="memoryLimitInput" name="memoryLimit" value="1">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">容器CPU</label>
        <div class="layui-input-inline" id="slider-cpu-set" style="padding: 16px 16px 16px 7px;">
        </div>
        <div class="layui-form-mid">
            核数
        </div>
    </div>
    <div class="layui-form-item" hidden>
        <input type="text" id="cpuSetInput" name="cpuSetLimit" value="1">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">容器优先级</label>
        <div class="layui-input-inline" >
            <select  id="cpuShare" name="cpuShare">
                <option value="4096">极高</option>
                <option value="2048">高</option>
                <option selected value="1024">正常</option>
                <option value="512">低</option>
                <option value="256">极低</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">截止时间</label>
        <div class="layui-input-inline" >
            <input type="text" class="layui-input" name="endTime" id="endTime" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="button" lay-submit lay-filter="LAY-user-back-submit" value="确认" class="layui-btn">
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'laydate', 'slider'], function(){
        var $ = layui.$
            ,form = layui.form, table = layui.table,
            laydate = layui.laydate, slider = layui.slider;
        form.render();
        laydate.render({
            elem: '#endTime',
            type: 'datetime',
            min: new Date().getTime(),
        });

        $.ajax({
            url: "/system/info",
            dataType: 'json',
            complete: function (result) {
                let resultJson = result.responseJSON;
                let memorySize = resultJson.data.memorySize;
                let cpuSet = resultJson.data.cpuSet;

                slider.render({
                    elem: '#slider-memory',
                    max: parseInt(memorySize),
                    min: 1,
                    input: true,
                    change: function (value) {
                        $('#memoryLimitInput').val(value);
                    }
                })

                slider.render({
                    elem: '#slider-cpu-set',
                    max: parseInt(cpuSet),
                    min: 1,
                    input: true,
                    change: function (value) {
                        $('#cpuSetInput').val(value);
                    }
                })
            }
        })
    });
</script>